import React from 'react'
import { LdhMapSelect, LdhInput, LdhRangePicker } from '@biz/Components'
import { LdhSearchForm, LdhSearchItem } from '@biz/PageCompnents'
import { LdhObjListSelect } from '../../../../biz/Components'
import { ConfigProvider } from 'antd'
import locale from 'antd/locale/zh_CN'
import dayjs from 'dayjs'

import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')

export default class Search extends React.Component {
  constructor(props) {
    super(props)
    this.onSearch = this.onSearch.bind(this)
  }

  onSearch(values) {
    let { onChange, store } = this.props
    let { so } = store
    const date = values?.date || []
    const completedStartTime = date?.[0]
      ? dayjs(date?.[0]).format('YYYY-MM-DD')
      : ''
    const completedEndTime = date?.[1]
      ? dayjs(date?.[1]).format('YYYY-MM-DD')
      : ''
    so = {
      ...so,
      ...values,
      pageNumber: 1,
      completedStartTime,
      completedEndTime,
    }
    delete so?.date
    onChange?.(so)
  }

  render() {
    let { store } = this.props
    let { loading, shopList = [] } = store
    return (
      <LdhSearchForm onSearch={this.onSearch} loading={loading}>
        <LdhSearchItem label="订单号" name="orderNoLike">
          <LdhInput />
        </LdhSearchItem>

        <LdhSearchItem label="门店名称" name="shopId">
          <LdhObjListSelect list={shopList} addAll />
        </LdhSearchItem>

        <LdhSearchItem label="用户手机号" name="userPhoneLike">
          <LdhInput />
        </LdhSearchItem>

        <LdhSearchItem label="会员订单" name="type">
          <LdhMapSelect type="WashOrderType" addAll />
        </LdhSearchItem>
        <ConfigProvider locale={locale}>
          <LdhSearchItem label="日期" name="date">
            <LdhRangePicker valueFormat="YYYY-MM-DD"></LdhRangePicker>
          </LdhSearchItem>
        </ConfigProvider>
      </LdhSearchForm>
    )
  }
}
